<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台管理员登录界面</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery1.9.0.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function(){
    	/*表单鼠标经过移出事件*/
    	$("#at").mouseover(function(){
    		$("#at").css("border-color","#33FFFF");
    	});
    	$("#at").mouseout(function(){
    		$("#at").css("border-color","#BBFFEE");
    	});
    	
    	$("#pd").mouseover(function(){
    		$("#pd").css("border-color","#33FFFF");
    	});
    	$("#pd").mouseout(function(){
    		$("#pd").css("border-color","#BBFFEE");
    	});
	});
</script>
<style type="text/css">
	body{ background:url(${pageContext.request.contextPath }/img/login_bg.jpg);}
	.tit{ margin:auto; margin-top:170px; text-align:center; width:500px; padding-bottom:20px;}
	.login-wrap{ width:220px; padding:30px 50px 0 330px; height:220px; background:#fff url(${pageContext.request.contextPath }/img/loginbg.jpg) no-repeat 30px 40px; margin:auto; overflow: hidden;}
	.login_input{ display:block;width:210px; height: 20px;}
	.login_user{ background: url(${pageContext.request.contextPath }/img/input_icon_1.png) no-repeat 200px center;height: 30px;border: solid;border-color:#BBFFEE }
	.login_password{ background: url(${pageContext.request.contextPath }/img/input_icon_2.png) no-repeat 200px center;height: 30px;border: solid;border-color: #BBFFEE}
	.btn{display:block;text-decoration:none;height: 35px;width: 220px;text-align: center}
	.btn-login{ background:#33CCFF; box-shadow:none; text-shadow:none; color:#fff; border:none;height:35px;line-height:35px; font-size:20px; font-family:"microsoft yahei";}
	.btn-login:hover{ background:#00BBFF; color:#fff;}
	tr{display: block;margin: 20px 0;}
	.copyright{ margin:auto; margin-top:10px; text-align:center; width:370px; color:#CCC}
	@media (max-height: 700px) {.tit{ margin:auto; margin-top:100px; }}
	@media (max-height: 500px) {.tit{ margin:auto; margin-top:50px; }}
</style>
</head>
<body>
	<div class="tit">
	    <span><font size="7" style="color: white">递四方物流管理系统</font></span>
	</div>
	<div class="login-wrap">
	  <table width="100%" border="0" cellspacing="0" cellpadding="0">
	    <tr>
	      <td><input id="at" type="text" class="login_input login_user" placeholder="请输入工号" /></td>
	    </tr>
	    <tr>
	      <td><input id="pd" type="password"  class="login_input login_password" placeholder="请输入密码" /></td>
	    </tr>
	    <tr>
	      <td height="35" width="220" valign="bottom"><a href="index.jsp" class="btn btn-block btn-login">登录</a></td>
	    </tr>
	  </table>
	</div>
	<div class="copyright">为了让你获得更好的体验，请使用谷歌浏览器</div>
</body>
</html>